import React from 'react';
import { connect } from 'umi';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faTimes,faMinus} from '@fortawesome/free-solid-svg-icons';
import {faSquare,faWindowRestore} from '@fortawesome/free-regular-svg-icons';

const SquareBtn = ({className,icon,color,onClick})=>{
    return (
        <button type="button" className={className ? `btn square-btn ${className} `:'btn square-btn'}
            onClick={onClick} >
            <FontAwesomeIcon icon={icon} color={color} ></FontAwesomeIcon>
        </button>
    )
}

const WindowState = ({isMax,quit,maximize,minimize})=>{
    
    return(
        <div className="d-flex align-items-center p-1">
            <SquareBtn icon={faMinus} color={'white'} onClick={minimize} />
            <SquareBtn icon={isMax ? faWindowRestore:faSquare} color={'white'} 
                onClick={maximize}/>
            <SquareBtn className="square-btn-close" icon={faTimes} color={'white'} onClick={quit}/>
        </div>
    )
}

const mapStateToProps = ({windowstate})=>{
    console.log('===>',windowstate)
    return {
        isMax : windowstate.windowState == 'maximize'
    }
}

const mapDispatchToProps ={
    quit:()=>{
        return {
            type:'windowstate/quit'
        }
    },
    maximize:()=>{
        console.log('maximize');
        return {
            type:'windowstate/maximize'
        }
    },
    minimize:()=>{
        return {
            type:'windowstate/minimize'
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(WindowState);